<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./indexRemove.css">
		<link rel="stylesheet" href="../swiper8/swiper-bundle.css">
		<script src="../swiper8/swiper-bundle.min.js"></script>
		<script src="../js/jquery-3.6.0.min.js"></script>
		<!-- 引入动画 -->
		<link rel="stylesheet" href="../AOS-animations/aos.css">
		<script src="../AOS-animations/aos.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- 手机端导航栏开始 -->
			<div class="nav">
				<div class="navLogo"><img src="../img/logo-top.png" alt=""></div>
				<div class="navText">
					<img id="more" src="../img/more.png" alt="">
					<ul id="down">
						<a href="#">
							<li>首页</li>
						</a>
						<a href="#">
							<li>红馆简介</li>
						</a>
						<a href="#">
							<li>所获荣誉</li>
						</a>
						<a href="#">
							<li>校外基地</li>
						</a>
						<a href="#">
							<li>红色社团</li>
						</a>
					</ul>
				</div>
			</div>

			<div class="banner">
				<div class="swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/stimulate.png"></div>
						<div class="swiper-slide"><img src="../img/in-depthStudy.jpg"></div>
						<div class="swiper-slide"><img src="../img/schoolScenery.jpg"></div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="inform">
				<div class="announciate">
					<div class="announciateVedio">
						<video controls>
							<source src="../img/dance.mp4">
						</video>
						<div class="announciateDetails">
							<div class="announciateTime">
								<p>2022-07</p>
								<p>12</p>
							</div>
							<div class="play">视频播放</div>
						</div>
					</div>
					<div class="announciateText">
						<div class="announceTitle">
							通知公告
						</div>
						<ul class="circle">
							<a href="#">
								<li>
									<div>2022-11-23</div>
									<div class="li-t">关于做好迎接鲁商集团党委巡察反馈问题整改落实情况“回头看”准备工作
									</div>
								</li>
							</a>
							<a href="#">
								<li>
									<div>2022-11-23</div>
									<div class="li-t">山东省城市服务技师学院值班工作管理办法
									</div>
								</li>
							</a>
							<a href="#">
								<li>
									<div>2022-11-23</div>
									<div class="li-t">关于召开3月份月度调度会的通知
									</div>
								</li>
							</a>
							<a href="#">
								<li>
									<div>2022-11-23</div>
									<div class="li-t">高新区管委副主任李如鹏视察山东城院疫情防控工作
									</div>
								</li>
							</a>
							<a href="#">
								<li>
									<div>2022-11-23</div>
									<div class="li-t">关于做好迎接鲁商集团党委巡察反馈问题整改落实情况“回头看”准备工作
									</div>
								</li>
							</a>
						</ul>
					</div>
				</div>
			</div>
			<div class="education">
				<div class="educationTitle">
					<p>主题教育</p>
					<p>查看更多&gt;</p>
				</div>
				<div class="hold">
					<div class="holdLeft">
						<img src="../img/classroom.jpg" alt="">
						<p>
							关于举办第二届[2022年]烟台市乡村面艺术节
						</p>
						<p><img src="../img/zhongse.png" alt="">️2021-09-09</p>
						<div class="overlay"></div>
					</div>
					<div class="holdLeft">
						<img src="../img/newlyBron.jpg" alt="">
						<p>
							关于举办第二届[2022年]烟台市乡村面艺术节
						</p>
						<p><img src="../img/zhongse.png" alt="">️2021-09-09</p>
						<div class="overlay"></div>
					</div>
					<div class="holdLeft">
						<img src="../img/oath.jpg" alt="">
						<p>
							关于举办第二届[2022年]烟台市乡村面艺术节
						</p>
						<p><img src="../img/zhongse.png" alt="">️2021-09-09</p>
						<div class="overlay"></div>
					</div>
				</div>
			</div>
			<div class="dynamic">
				<div class="dynamicTitle">
					<p>工作动态</p>
					<p>查看更多&gt;</p>
				</div>
				<div class="dynamicMain">
					<div class="dynamicAchievement">
						<div class="dynamicAchievementLeft">
							<div class="dynamicTime">
								<p>29</p>
								<p>2022-09</p>
							</div>
							<div class="dynamicDetails">
								<p>我校13项成果获评北京市高等校育教学成果奖</p>
								<p>2021年北京市商房教有收学成实评选总南已考联我较共有取晚成量</p>
							</div>
						</div>
						<div class="dynamicAchievementRight">
							<div class="dynamicTime">
								<p>29</p>
								<p>2022-09</p>
							</div>
							<div class="dynamicDetails">
								<p>我校13项成果获评北京市高等校育教学成果奖</p>
								<p>2021年北京市商房教有收学成实评选总南已考联我较共有取晚成量</p>
							</div>
						</div>
						<div class="dynamicAchievementLeft">
							<div class="dynamicTime">
								<p>29</p>
								<p>2022-09</p>
							</div>
							<div class="dynamicDetails">
								<p>我校13项成果获评北京市高等校育教学成果奖</p>
								<p>2021年北京市商房教有收学成实评选总南已考联我较共有取晚成量</p>
							</div>
						</div>
						<div class="dynamicAchievementRight">
							<div class="dynamicTime">
								<p>29</p>
								<p>2022-09</p>
							</div>
							<div class="dynamicDetails">
								<p>我校13项成果获评北京市高等校育教学成果奖</p>
								<p>2021年北京市商房教有收学成实评选总南已考联我较共有取晚成量</p>
							</div>
						</div>
					</div>
					<div class="dynamicStyry">
						<img src="../img/teaching.jpg" alt="">
						<p>“为党育人 为国育才”———9位法大教师倾情讲述育人故事”</p>
					</div>
				</div>
			</div>
			<div class="society">
				<div class="societyMain">
					<p class="serve">社会服务</p>
					<div class="societyBox">
						<div class="societyContent">
							<a href="#">
								<img src="../img/partyServe.jpg" alt="">
								<p>3月24日，一场别开生面的“平台通过网络直播的形式拉开帷暮</p>
								<p>2022 - 11 - 04</p>
								<div class="overlayNext">
									山东城院“五心工程”
									温暖校园
								</div>
							</a>
						</div>

						<div class="societyContent">
							<a href="#">
								<img src="../img/partyServe.jpg" alt="">
								<p>3月24日，一场别开生面的“平台通过网络直播的形式拉开帷暮</p>
								<p>2022 - 11 - 04</p>
								<div class="overlayNext">
									划重点!一图读懂山东城院“十四五”发展规划
								</div>
							</a>
						</div>
						<div class="societyContent">
							<a href="#">
								<img src="../img/partyServe.jpg" alt="">
								<p>3月24日，一场别开生面的“平台通过网络直播的形式拉开帷暮</p>
								<p>2022 - 11 - 04</p>
								<div class="overlayNext">
									划重点!一图读懂山东城院“十四五”发展规划
								</div>
							</a>
						</div>
						<div class="societyContent">
							<a href="#">
								<img src="../img/partyServe.jpg" alt="">
								<p>3月24日，一场别开生面的“平台通过网络直播的形式拉开帷暮</p>
								<p>2022 - 11 - 04</p>
								<div class="overlayNext">
									划重点!一图读懂山东城院“十四五”发展规划
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="exhibition">
				<div class="exhibitionText">
					<p>红馆展厅</p>
					<p>查看更多 &gt;</p>
				</div>
				<div class="exhibitionImg">
					<div class="exhibitionImgLeft">
						<div class="exhibitionImgBig">
							<img src="../img/newlyBron.jpg" alt="">
						</div>
						<div class="exhibitionImgSmall">
							<img src="../img/moon.jpg" alt="">
							<img src="../img/huojian.jpg" alt="">
						</div>
					</div>
					<div class="exhibitionImgRight">
						<div class="exhibitionImgSmall">
							<img src="../img/huojian.jpg" alt="">
							<img src="../img/plan.jpeg" alt="">
						</div>
						<div class="exhibitionImgBig">
							<img src="../img/blackborard.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="tail">
				<ul>
					<a href="#">
						<li>友情链接</li>
					</a>
					<a href="#">
						<li>中华人民共和国教育部</li>
					</a>
					<a href="#">
						<li>山东教育厅</li>
					</a>
					<a href="#">
						<li>山东省科学技术厅</li>
					</a>
					<a href="#">
						<li>中国高职专教育网</li>
					</a>
					<a href="#">
						<li>山东省科学技术厅</li>
					</a>
					<a href="#">
						<li>中国高职专教育网</li>
					</a>
				</ul>
			</div>
			<div class="footer">
				<div class="main">
					<div class="footLogo">
						<img src="../img/logo-top.png" alt="">
					</div>
					<div class="change">
						<div class="footDetails">
							<div class="footDetailsTitle">联系我们</div>
							<div class="footText">
								<p>办&nbsp;&nbsp;公&nbsp;&nbsp;室</p>
								<p>:</p>
								<p>0539-5916215</p>
							</div>
							<div class="footText">
								<p>招生资讯</p>
								<p>:</p>
								<p>0539-5916215</p>
							</div>
							<div class="footText">
								<p>官&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网</p>
								<p>:</p>
								<p>www.sdcc.edu.cn</p>
							</div>
							<div class="footText">
								<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</p>
								<p>:</p>
								<p>sdccxy@126.com</p>
							</div>
							<div class="footText">
								<p>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</p>
								<p>:</p>
								<p>山东省烟台市高新区海天路1001号</p>
							</div>
						</div>

						<div class="footContack" id="weCat">
							<div class="wecat">
								<img src="../img/weCat.png" id="weCat" alt="">
								<p>官方微信</p>
							</div>
						</div>
					</div>
				</div>
				<div class="stop">
					Copyright O山东省城市服务技师学院版权所有
				</div>
			</div>
		</div>
	</body>
	<script>

		// 显示及隐藏导航栏
		$(function() {
			// 绑定按钮点击事件
			$('#more').click(function() {
				// 获取 div 元素
				var more = $(this).siblings("ul");
				if (more.is(':visible')) {
					// 如果元素当前是可见状态，则隐藏它
					more.slideUp();
				} else {
					// 如果元素当前是隐藏状态，则显示它
					more.slideDown();
				}
			});
		});
		$(function() {
			$('#down').click(function() {
				$(this).slideUp()
			})
		})

		// 轮播图开始
		var mySwiper = new Swiper('.swiper', {
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: false,
			},
			effect: 'slide', //图片切换方式淡入
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true, //点击分页器指示点可以切换banner图
			},
			// 如果需要前进后退按钮
			navigation: {
				clickable: true,
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
		// 轮播图结束
		// $(document).ready(function() {
		// 	$(".holdLeft").hover(function() {
		// 		$(this).find(".overlay").css({
		// 			display: "block"
		// 		})
		// 	}, function() {
		// 		$(this).find(".overlay").css({
		// 			display: "none"
		// 		})
		// 	})
		// })

		// $('.overlayNext').hide(); // 隐藏样式
		// $(document).ready(function() {
		// 	$(".societyContent").hover(function() {
		// 		$(this).find(".overlayNext").css({
		// 			display: "flex"
		// 		})
		// 	}, function() {
		// 		$(this).find(".overlayNext").css({
		// 			display: "none"
		// 		})
		// 	})
		// })

		//动画
		// AOS.init({
		// 	duration: 1200,
		// })


		//显示隐藏微信和微博
		// $(document).ready(function() {
		//   $('.box').hover(
		//     function() {
		//       $(this).find('img').show();
		//     },
		//     function() {
		//       $(this).find('img').hide();
		//     }
		//   );
		// });
	</script>
</html>